<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Timelines: <%= controller.action_name %></title>


<%= render :partial => "generate_timeline", :layout => false %>






  <%= javascript_include_tag :defaults %>
  <%= javascript_include_tag 'procolor' %>
  <%= javascript_include_tag 'scriptaculous' %>
  <%= javascript_include_tag 'datepicker.js ' %>
    <%= javascript_include_tag 'prototype-base-extensions.js ' %>
   <%= javascript_include_tag 'prototype-date-extensions.js ' %>
  <%= javascript_include_tag 'jquery/jquery-1.3.2.min' %>
  <%= javascript_include_tag 'jquery/jquery-ui-1.7.2.custom.min' %>


  <%= calendar_date_select_includes 'blue' %>

  <%= stylesheet_link_tag 'main' %>
  <%= stylesheet_link_tag 'jquery-ui-1.7.2.custom' %>
   <%= stylesheet_link_tag 'datepicker' %>


  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAIFwdo3fc68VWh8FnJBSInxRjIAwT3IxOM1TOZtwFBIzVqOQHZRSjIfpmYUtATYumKjx8DydEhJWp8Q"></script>

  <script type="text/javascript">

  jQuery.noConflict();
  var j = jQuery;

  j(document).ready(function() {
    j("#timeline_event_form").submitWithAjax();
  })
  j.fn.submitWithAjax = function() {
     this.submit(function() {
       j.post(this.action, j(this).serialize(), null, "script");
    return false;
     })
   return this;
  };




			j(function(){
                              j("#accordion").accordion(
                              { header: "h3",
                                autoHeight:false,
                                collapsible:true,
                                active:1
                            }

                            );

				// Dialog
				j('#dialog').dialog({
					autoOpen: false,
					width: 600,
                                        height: 450
					
				});
	// Dialog
				j('#map_dialog').dialog({
					autoOpen: false,
					width: 400,
                                        height: 300

				});

								
			});
		</script>
    <script type="text/javascript">


    function mapinitialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);

  map.addControl(new GSmallMapControl()); // added
  map.addControl(new GMapTypeControl()); // added
          GEvent.addListener(map, 'click', function(overlay, point) {
            document.getElementById("id_latitude").value=point.y;
            document.getElementById("id_longtitude").value=point.x;
          });
 

      }
    }

function initializepage(){
onLoad();
mapinitialize();
new Control.DatePicker('timeline_event_event_start', {icon: '/images/calendar.png',
	timePicker: true, timePickerAdjacent: true});
     new Control.DatePicker('timeline_event_event_end', {icon: '/images/calendar.png',
	timePicker: true, timePickerAdjacent: true});
      new Control.DatePicker('timeline_event_latest_start', {icon: '/images/calendar.png',
	timePicker: true, timePickerAdjacent: true});
      new Control.DatePicker('timeline_event_earliest_end', {icon: '/images/calendar.png',
	timePicker: true, timePickerAdjacent: true});
    }


function showForm(){
j('#dialog').dialog('open');

}
function showMap(){
j('#map_dialog').dialog('open');

}
    </script>

</head>
 <body  onload="initializepage();" onresize="onResize();">

<h3><a href="#">Your Timeline</a></h3>
<div id="tl" class="timeline-default" style="height: 400px;"></div>
   
<div id="dialog" title="Event Wizard">

 <%= render :partial => "timeline_events/timeline_event_form", :layout => false %>
</div>
<h3><a href="javascript:showForm();">Create a new event</a></h3>

<div id="map_dialog" title="Choose your location">
  <h3><a href="#">Double click to choose location and close window</a></h3>
<div id="map_canvas" style="width: 600px; height: 400px"></div>
</div>

</body>
</html>
